<template>
  <view
    v-if="
      checkedOrg.orgAvailable &&
      (!checkedOrg.appList || checkedOrg.appList.length === 0)
    "
    class="empty-view"
  >
    <u-empty
      text="请联系管理员给您赋予应用权限"
      mode="permission"
      :fontSize="32"
      color="#ff9900"
      icon-color="#fcbd71"
    ></u-empty>
  </view>
  <view v-if="!checkedOrg.orgAvailable" class="empty-view">
    <u-empty
      text="当前组织已被禁用"
      mode="permission"
      :fontSize="32"
      color="#ff9900"
      icon-color="#fcbd71"
    ></u-empty>
  </view>
  <template v-else>
    <view v-if="!checkedOrg.accountAvailable" class="empty-view">
      <u-empty
        text="您的账户已被组织禁用，请联系管理员"
        mode="permission"
        :fontSize="32"
        color="#ff9900"
        icon-color="#fcbd71"
      ></u-empty>
    </view>
    <view v-else class="content">
      <view class="search-box">
        <u-search
          class="search-input"
          placeholder="请输入项目名称/项目编号模糊搜索"
          shape="round"
          :show-action="false"
          v-model="queryData.queryInfo"
          @search="queryList(true)"
          @clear="clearSearch()"
        ></u-search>
        <u-icon
          size="50"
          custom-prefix="custom-icon"
          name="fenlei"
          @click="show = true"
        ></u-icon>
      </view>
      <view class="content-item">
        <projectItemVue
          v-for="(item, index) in projectList"
          :key="item.projectId"
          :curr-item="item"
          :last-item="projectList[index - 1]"
        />
        <view class="u-p-b-20">
          <u-loadmore :status="status" :load-text="loadText" />
        </view>
      </view>
    </view>
  </template>
  <u-popup
    v-model="show"
    mode="right"
    :closeable="true"
    close-icon-pos="top-left"
    width="100%"
    border-radius="12"
  >
    <view class="popup-content">
      <view class="title">全部筛选</view>
      <scroll-view class="popup-content-item" scroll-y="true">
        <u-form :model="queryData" label-position="top" ref="uForm">
          <u-form-item label="试验类型" prop="projectTypeValueList">
            <dictItem
              v-model:value="queryData.projectTypeValueList"
              :is-http="true"
              :multiple="true"
              app-code="CONFIG"
              flag="PROJECT_TYPE"
            ></dictItem>
          </u-form-item>
          <u-form-item label="试验分期" prop="stagesValueList">
            <dictItem
              v-model:value="queryData.stagesValueList"
              :is-http="true"
              :multiple="true"
              app-code="CONFIG"
              flag="TRIAL_STAGES"
            ></dictItem>
          </u-form-item>
          <u-form-item label="项目状态" prop="projectStatusList">
            <select-box-group
              v-model:select="queryData.projectStatusList"
              type="multiple"
            >
              <select-box-option
                v-for="(item, index) in PROJECT_STATUS_MAP"
                :key="index"
                :label="item.label"
                :value="index"
              ></select-box-option>
            </select-box-group>
          </u-form-item>
        </u-form>
      </scroll-view>
      <view class="btn-group">
        <u-button
          plain
          type="primary"
          shape="circle"
          class="w-40"
          @click="clear()"
          >清空选择</u-button
        >
        <u-button type="primary" shape="circle" class="w-40" @click="search()"
          >确定</u-button
        >
      </view>
    </view>
  </u-popup>
  <u-tabbar
    v-model="current"
    :list="tabbar"
    active-color="#2979ff"
    :safe-area-inset-bottom="true"
  ></u-tabbar>
</template>

<script lang="ts" setup>
import { nextTick } from 'vue';
import projectItemVue from './components/projectItem.vue';
import { tabbar } from '@/common/tabbar';
import { getUserGrantProjectlist } from '@/api/modules/project';
import dictItem from '@/components/SelectBox/dictItem.vue';
import { PROJECT_STATUS_MAP } from './index';
import selectBoxGroup from '@/components/SelectBox/selectBoxGroup.vue';
import selectBoxOption from '@/components/SelectBox/selectBoxOption.vue';
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores/user';
import useOrgAuth from '@/hooks/useOrgAuth';

const form = ref<any>({});
const selectChange = (val: any) => {
  console.log(val);
};
const userStore = useUserStore();
const orgList = (userStore?.getAuth ?? [])
  .filter((item: any) =>
    (item.appList || []).some((el: any) => el.appCode === 'CTMS')
  )
  .map((item: any) => ({
    label: item.orgName,
    value: item.orgId,
  }));

const { checkedOrg } = useOrgAuth();
const show = ref(false);
const current = ref(1);
const status = ref('loadmore');
const loadText = {
  loadmore: '加载更多',
  loading: '努力加载中',
  nomore: '没有更多了',
};

const projectList = ref<any[]>([]);
const pageNum = ref(1);
const listTotla = ref(0);
const queryData = reactive<any>({
  pageNum: 1,
  pageSize: 10,
  participate: false,
  queryInfo: undefined,
});

const clearSearch = async () => {
  queryData.queryInfo = undefined;
  await nextTick();
  if (orgList.length > 0) {
    queryList(true);
  }
};

const queryList = (clearFlag?: boolean) => {
  if (orgList.length === 0) {
    return;
  }
  if (clearFlag) {
    queryData.pageNum = 1;
    projectList.value = [];
  }
  if (listTotla.value !== 0 && projectList.value.length === listTotla.value) {
    return;
  }
  status.value = 'loading';
  const params = {
    ...queryData,
    projectTypeValueList: queryData.projectTypeValueList
      ? queryData.projectTypeValueList.join(',')
      : undefined,
    stagesValueList: queryData.stagesValueList
      ? queryData.stagesValueList.join(',')
      : undefined,
    projectStatusList: queryData.projectStatusList
      ? queryData.projectStatusList.join(',')
      : undefined,
  };
  getUserGrantProjectlist(params).then((res: any) => {
    projectList.value = projectList.value.concat(res.list ?? []);
    listTotla.value = res.total;
    uni.stopPullDownRefresh();
    if (projectList.value.length === listTotla.value) {
      status.value = 'nomore';
    } else {
      status.value = 'loadmore';
    }
  });
};

const search = () => {
  if (orgList.length > 0) {
    queryList(true);
  }
  show.value = false;
};
const clear = () => {
  queryData.projectTypeValueList = undefined;
  queryData.stagesValueList = undefined;
  queryData.projectStatusList = undefined;
  search();
};

onShow(() => {
  queryData.pageNum = 1;
  projectList.value = [];
  if (orgList.length > 0) {
    queryList();
  }
});

const scroll = () => {};
const scrolltoupper = () => {
  queryData.pageNum += 1;
  queryList();
  console.log('触底了');
};
onReachBottom(() => {
  console.log('-------------onReachBottom');

  scrolltoupper();
});

onPullDownRefresh(() => {
  console.log('-------------onPullDownRefresh');
  search();
});
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  background: #fff;
  width: 100%;
  padding: 26rpx 32rpx;
  position: fixed;
  top: 0;
  height: 116rpx;
  overflow: hidden;
  z-index: 10;
  .search-input {
    flex: 1;
    margin-right: 20rpx;
  }
}
.content-item {
  margin-top: 146rpx;
}

.popup-content {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .title {
    font-size: 32rpx;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10rpx;
    flex: 0;
  }
  .popup-content-item {
    flex: 1;
    max-height: calc(100vh - 222rpx - env(safe-area-inset-bottom));
  }
}

.btn-group {
  display: flex;
  justify-content: space-around;
  padding-top: 30rpx;

  .w-40 {
    width: 40%;
  }
}
.empty-view {
  width: 100%;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>
